@value unit, gray-color, blue-color, light-blue-color, dark-gray-color, error-color, link-hover-color, text-color, border-radius, ease, fixed-z-index from  "../global/global.css";
@value soft-blue-color: #cef;
@value border-color: #dfe5eb;
@value cellSize: calc(unit * 3);
@value calHeight: calc(unit * 36);
@value calWidth: calc(unit * 38);
@value yearHeight: calc(unit * 4);
@value yearWidth: calc(unit * 7);

.container {
  display: inline-block;
}

.hoverable {
  cursor: pointer;
  transition: color 0.2s ease-out 0s;
}

.hoverable:hover {
  transition: none;

  color: link-hover-color;
}

.datePicker.datePicker {
  padding-right: unit;
}

.displayDate {
  display: inline-block;

  min-width: calc(unit * 11);

  text-align: left;
}

.displayDate.displayRange {
  min-width: calc(unit * 22);
}

.clear {
  cursor: pointer;
  transition: opacity ease;

  opacity: 0.3;
}

.datePicker:hover .clear {
  opacity: 0.5;

  &:hover {
    transition: none;

    opacity: 1;
  }
}

.datePopup {
  user-select: none;
  text-align: left;
}

.input.input {
  width: calc(unit * 17);
}

.weekdays {
  margin-top: calc(unit * 2);

  color: dark-gray-color;

  line-height: normal;
}

.weekday {
  display: inline-block;

  width: cellSize;

  text-align: center;
  text-transform: capitalize;
}

.weekend {
  color: error-color;
}

.calendar {
  position: relative;

  overflow: hidden;

  width: calWidth;
  height: calHeight;

  box-shadow: 0 -1px border-color;
}

.months {
  position: absolute;
  top: 0;
  right: yearWidth;
  bottom: 0;
  left: 0;
}

.days {
  position: relative;
  left: 0;
}

.month {
  display: flex;
  flex-wrap: wrap;

  width: calc(unit * 21);
  margin: calc(unit * 2);
}

.month > * {
  flex-shrink: 0;

  box-sizing: border-box;
  height: cellSize;

  line-height: cellSize;
}

.monthTitle {
  /* IE workaround, see https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box */

  width: calc(unit * 12);
  padding-left: calc(unit * 0.5);

  text-align: left;

  font-weight: bold;

  @supports (flex-basis: 1px) {
    flex-basis: calc(unit * 12);

    width: auto;
  }
}

.day {
  position: relative;

  flex-basis: cellSize;

  cursor: pointer;
  transition: background-color ease, color ease;
  text-align: center;
}

.day.between {
  transition: none;

  background-color: light-blue-color;
}

.day.activeBetween {
  transition: none;

  background-color: soft-blue-color;
}

.day.current {
  color: #fff;
  border-radius: border-radius;
  background-color: blue-color;
}

.day.active {
  transition: none;

  color: link-hover-color;
  border-radius: border-radius;
  background-color: soft-blue-color;
}

.day.from {
  border-radius: border-radius 0 0 border-radius;
}

.day.to {
  border-radius: 0 border-radius border-radius 0;
}

.day.from.to {
  border-radius: border-radius;
}

.day.empty {
  pointer-events: none;

  opacity: 0;
}

.today::after {
  position: absolute;
  top: 0;
  right: calc(unit * 0.5);

  content: '•';

  font-size: unit;
}

.day.today::after {
  top: 9px;
  right: 0;

  width: 100%;

  text-align: center;
}

.monthNames {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: calc(unit * 6);

  box-shadow: -1px 0 border-color;
}

.monthName {
  composes: hoverable;

  position: relative;

  height: cellSize;
  padding-left: calc(unit * 1.5);

  line-height: cellSize;
}

.monthSlider {
  position: absolute;
  z-index: fixed-z-index;
  right: 0;
  left: -1px;

  height: calc(unit * 6);

  cursor: grab;

  opacity: 0.1;
  background-color: blue-color;
}

.monthSlider:hover {
  opacity: 0.15;
}

.monthSlider.dragging {
  cursor: grabbing;

  opacity: 0.25;
}

.range {
  position: absolute;
  left: 0;

  width: 2px;

  background-color: blue-color;
}

.years {
  position: absolute;
  top: 0;
  right: 0;

  width: yearWidth;

  box-shadow: -1px 0 border-color;
}

.year {
  composes: hoverable;

  position: relative;

  height: yearHeight;

  text-align: center;

  color: dark-gray-color;

  line-height: yearHeight;
}

.currentYear {
  cursor: auto;
  transition: none;

  color: text-color;

  font-weight: bold;
}

.currentYear:hover {
  color: text-color;
}
